<!DOCTYPE html>
<html lang="en">

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css" rel="stylesheet" />
    <script type="text/javascript">

        var getDate = function () {
            var today = new Date();
            var dd = today.getDate();
            var mm = today.getMonth() + 1; //January is 0!

            var yyyy = today.getFullYear();
            if (dd < 10) {
                dd = '0' + dd;
            }
            if (mm < 10) {
                mm = '0' + mm;
            }
            var todayDate = yyyy + '-' + mm + '-' + dd;
            return todayDate;
        };
        var url = window.location.href;
        var arrayUrl = url.split('=');
        var ou = arrayUrl[2];
        //var arrayUrl1 = arrayUrl[2].split('&');
        //var pe = arrayUrl1[0];
      //  var year = pe.split('Q')[0];
      //  var quarter = pe.split('Q')[1];
        var prog_id = "VCuHIFtJJSv";
        var enddate = getDate();
        var totalevent, totalEndevent = 0, totalEndevent2 = 0, activeatendevent;



        var checkStatus = function (data) {
            data.enrollments.forEach(function (element, index) {
                var tei = element.trackedEntityInstance;
                var count = 0;
                var count2 = 0, count6 = 0;
                $.when(
                    $.getJSON("../api/events.json?orgUnit=" + ou + "&program=" + prog_id + "&programStage=Kr60c8j7vMe&trackedEntityInstance=" + tei + "&skipPaging=true&endDate=" + enddate, {
                        format: "json"
                    }),
                    $.getJSON("../api/events.json?orgUnit=" + ou + "&program=" + prog_id + "&programStage=HvBZokNtaEZ&trackedEntityInstance=" + tei + "&skipPaging=true", {
                        format: "json"
                    }),
                    $.getJSON("../api/trackedEntityInstances/" + tei + ".json&skipPaging=true", {
                        format: "json"
                    }),
                    $.getJSON("../api/events.json?orgUnit=" + ou + "&program=" + prog_id + "&programStage=kwXu1zEDMEe&trackedEntityInstance=" + tei + "&skipPaging=true", {
                        format: "json"
                    })

                ).then(function (data1, data2, data3, data4) {
                    $('table tr.no-records-found').remove();
                    if (data1[0].events.length != 0) {
                        count = 1;
                    }
                    else if (data1.httpStatusCode == 409 || data1.httpStatusCode == "409") { count = 2; }
                    if (data2[0].events.length == 0) {
                        count2 = 2;
                        count6 = 2;
                    }
                    else if (data2.httpStatusCode == 409 || data2.httpStatusCode == "409") { count2 = 2; }
                    else {
                        var latestEventDate = "";
                        var count2 = 0, count3 = 0;
                        for (var b = 0; b < data2[0].events.length; b++) {

                            if (b == data2[0].events.length - 1 && b != 0) {
                                expireDate2 = expireDate;
                            }
                            else if (b == data2[0].events.length - 1 && b == 0) {
                                var date = data2[0].events[b].eventDate;
                                var first = date.split('T')[0];
                                var expireDate = new Date(first);
                                expireDate2 = expireDate;
                                latestEventDate = first;
                            }
                            else {
                                var date = data2[0].events[b].eventDate;
                                var first = date.split('T')[0];
                                var expireDate = new Date(first);
                                var date2 = data2[0].events[b + 1].eventDate;
                                var second = date2.split('T')[0];
                                var expireDate2 = new Date(second);
                            }
                            if (expireDate > expireDate2) {
                                latestEventDate = first;
                            }
                            else if (expireDate2 > expireDate) {
                                latestEventDate = second;
                            }
                            else {
                                latestEventDate = latestEventDate;
                            }
                            var dateSixMonthsAgo = new Date(enddate);
                            var dateFourMonthsAgo = new Date(enddate);
                            dateSixMonthsAgo.setMonth(dateSixMonthsAgo.getMonth() - 6);
                            dateFourMonthsAgo.setMonth(dateFourMonthsAgo.getMonth() - 4);
                            console.log("event date : " + first);
                            if (new Date(enddate) >= new Date(latestEventDate) && new Date(latestEventDate) <= dateSixMonthsAgo) {
                                count2 = 1;
                            }
                            else {
                                count2 = 0;
                            }
                            if (new Date(enddate) >= new Date(latestEventDate) && new Date(latestEventDate) <= dateFourMonthsAgo) {
                                count3 = 3;
                            }
                            else {
                                count3 = 0;
                            }
                        }
                    }

                    if(count6 == 2){
                      var date = data4[0].events[0].eventDate;
                      var latestEventDate = date.split('T')[0];
                      var expireDate = new Date(first);
                      var dateSixMonthsAgo = new Date(enddate);
                      var dateFourMonthsAgo = new Date(enddate);
                      dateSixMonthsAgo.setMonth(dateSixMonthsAgo.getMonth() - 6);
                      dateFourMonthsAgo.setMonth(dateFourMonthsAgo.getMonth() - 4);
                      console.log("event date : " + first);
                      if (new Date(enddate) >= new Date(latestEventDate) && new Date(latestEventDate) <= dateSixMonthsAgo) {
                          count2 = 1;
                      }
                      else {
                          count2 = 0;
                      }
                      if (new Date(enddate) >= new Date(latestEventDate) && new Date(latestEventDate) <= dateFourMonthsAgo) {
                          count3 = 3;
                      }
                      else {
                          count3 = 0;
                      }
                    }

                    for (var j = 0; j < data3[0].attributes.length; j++) {
                        if (data3[0].attributes[j].displayName == "File number") {
                            var file = data3[0].attributes[j].value;
                        }
                        if (data3[0].attributes[j].displayName == "Patient identifier") {
                            var pi = data3[0].attributes[j].value;
                        }
                    }
                    var row = "<tr><td style='text-align:center;border:1px solid #bbbbbb'>" + pi + "</td><td style='text-align:center;border:1px solid #bbbbbb'>" + file + "</td><td style='text-align:center;border:1px solid #bbbbbb'>" + latestEventDate + "</td></tr>";
                    if (count == 0 && count2 == 1) {
                        totalEndevent++;
                        $('.reporttable').append(row);
                    }
                    if (count == 0 && count3 == 3) {
                        totalEndevent2++;
                        $('.reporttable2').append(row);
                    }
                    document.getElementById('totalNumber').innerHTML = totalEndevent;
                    document.getElementById('totalNumber2').innerHTML = totalEndevent2;
                    //  $("#reportTable").tablesorter();
                    //  $("#reportTable2").tablesorter();
                    if (data.enrollments.length - 1 == index) {
                        document.getElementById('loader').style.display = "none";
                    }
                });

            });


        };

        $(document).ready(function () {

            $.when(
                $.getJSON("../api/enrollments.json?ou=" + ou + "&ouMode=DESCENDANTS&program=" + prog_id + "&fields=trackedEntityInstance&skipPaging=true&programEndDate=" + enddate, {
                    format: "json"
                })
            ).then(function (data1) {
                checkStatus(data1);

            });

            $("#export1").click(function (e) {
                e.preventDefault();

                //getting data from our table
                var data_type = 'data:application/vnd.ms-excel';
                var table_div = document.getElementById('reportTable');
                var table_html = table_div.outerHTML.replace(/ /g, '%20');

                var a = document.createElement('a');
                a.href = data_type + ', ' + table_html;
                a.download = 'Lost to follow up Records (6 months).xls';
                a.click();
            });

            $("#export2").click(function (e) {
                e.preventDefault();

                //getting data from our table
                var data_type = 'data:application/vnd.ms-excel';
                var table_div = document.getElementById('reportTable2');
                var table_html = table_div.outerHTML.replace(/ /g, '%20');

                var a = document.createElement('a');
                a.href = data_type + ', ' + table_html;
                a.download = 'Lost to follow up Records (4 months).xls';
                a.click();
            });

        });


    </script>
    <style>
        table {
            table-layout: fixed;
            word-wrap: break-word;
            text-align: center;
            border-collapse: collapse;
        }

        th {
            text-align: center;
        }

        tr {
            height: 30px;
            text-align: center;
        }

        td {
            height: 30px;
            text-align: center;
        }


        thead {
            background-color: lightgray;
            text-align: center;
        }

        /* Absolute Center Spinner */

        .loading {
            position: fixed;
            z-index: 999;
            height: 2em;
            width: 2em;
            overflow: show;
            margin: auto;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

        /* Transparent Overlay */

        .loading:before {
            content: '';
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
        }

        /* :not(:required) hides these rules from IE9 and below */

        .loading:not(:required) {
            /* hide "loading..." text */
            font: 0/0 a;
            color: transparent;
            text-shadow: none;
            background-color: transparent;
            border: 0;
        }

        .loading:not(:required):after {
            content: '';
            display: block;
            font-size: 10px;
            width: 1em;
            height: 1em;
            margin-top: -0.5em;
            -webkit-animation: spinner 1500ms infinite linear;
            -moz-animation: spinner 1500ms infinite linear;
            -ms-animation: spinner 1500ms infinite linear;
            -o-animation: spinner 1500ms infinite linear;
            animation: spinner 1500ms infinite linear;
            border-radius: 0.5em;
            -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
            box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
        }

        /* Animation */

        @-webkit-keyframes spinner {
            0% {
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @-moz-keyframes spinner {
            0% {
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @-o-keyframes spinner {
            0% {
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes spinner {
            0% {
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        button {
            cursor: pointer;
        }
    </style>

    <body>
        <div class="loading" id="loader">Loading&#8230;</div>

        <br>
        <table class="table table-striped table-inverse table-bordered table-hover">
            <tr>
                <td style="width:33%;text-align:center;border:1px solid #bbbbbb">Number of inactive patients (not had any visit in the previous 6 months)</td>
                <td style="width:33%;text-align:center;border:1px solid #bbbbbb" id="totalNumber"> </td>
                <td style="width:33%;text-align:center;border:1px solid #bbbbbb">
                    <button id="export1">Export Records</button>
                </td>
            </tr>
            <tr>
                <td style="width:33%;text-align:center;border:1px solid #bbbbbb">Number of inactive patients (not had any visit in the previous 4 months)</td>
                <td style="width:33%;text-align:center;border:1px solid #bbbbbb" id="totalNumber2">
                </td>
                <td style="width:33%;text-align:center;border:1px solid #bbbbbb">
                    <button id="export2">Export Records</button>
                </td>
            </tr>
        </table>
        <table class="table table-striped table-inverse table-bordered table-hover reporttable tablesorter" id="reportTable" width="100%">

            <thead>
                <tr>
                    <th colspan="3" style="text-align:center;border:1px solid #bbbbbb">Number of inactive patients (not had any visit in the previous 6 months)</th>
                </tr>
                <tr>
                    <th style="text-align:center;border:1px solid #bbbbbb">Patient Identifier</th>
                    <th style="text-align:center;border:1px solid #bbbbbb">File Number</th>
                    <th style="text-align:center;border:1px solid #bbbbbb">Last visit</th>
                </tr>
            </thead>
        </table>
        <table class="table table-striped table-inverse table-bordered table-hover reporttable2 tablesorter" id="reportTable2" width="100%">

            <thead>
                <tr>
                    <th colspan="3" style="text-align:center;border:1px solid #bbbbbb">Number of inactive patients (not had any visit in the previous 4 months)</th>
                </tr>
                <tr>
                    <th style="text-align:center;border:1px solid #bbbbbb">Patient Identifier</th>
                    <th style="text-align:center;border:1px solid #bbbbbb">File Number</th>
                    <th style="text-align:center;border:1px solid #bbbbbb">Last visit</th>
                </tr>
            </thead>
        </table>
    </body>

</html>
